<template>
  <div class="footer">
    <van-tabbar v-model="active">
      <van-tabbar-item v-for="(item, index) in footerList" :key="index" @click="jumpRouter(item.router)">
        <img :src="$route.path === item.router ? item.imgSrcActive : item.imgSrc" alt="" />
        <p :style="{ color: $route.path === item.router ? '#DAAB51' : '' }">
          {{ item.text }}
        </p>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  name: 'Vfooter',
  data() {
    return {
      homeImg: this.active === 0 ? require('../../assets/img/Home@2x.png') : require('../../assets/img/Home@2x(1).png'),
      active: 0,
      footerList: [
        {
          text: this.$t('Footer.Home'),
          router: '/home',
          imgSrc: require('../../assets/img/Home@2x.png'),
          imgSrcActive: require('../../assets/img/Home@2x(1).png')
        },
        {
          text: this.$t('Footer.Markets'),
          router: '/markets',
          imgSrc: require('../../assets/img/Markets@2x.png'),
          imgSrcActive: require('../../assets/img/Markets@2x(1).png')
        },
        // {
        //   text: this.$t('Footer.Trade'),
        //   router: '/trade',
        //   imgSrc: require('../../assets/img/Trade@2x.png'),
        //   imgSrcActive: require('../../assets/img/Trade@2x(1).png')
        // },
        {
          text: this.$t('message.新闻资讯'),
          router: '/content',
          imgSrc: require('../../assets/img/Asset@2x.png'),
          imgSrcActive: require('../../assets/img/Asset@2x(1).png')
        },
        {
          text: this.$t('Footer.Asset'),
          router: '/asset',
          imgSrc: require('../../assets/img/Trade@2x.png'),
          imgSrcActive: require('../../assets/img/Trade@2x(1).png')
        },
        {
          text: this.$t('Footer.Mine'),
          router: '/mine',
          imgSrc: require('../../assets/img/Mine@2x.png'),
          imgSrcActive: require('../../assets/img/Mine@2x(1).png')
        }
      ]
    }
  },

  methods: {
    jumpRouter(router) {
      if (router === this.$route.path) {
        return
      }
      this.$router.push(router)
    }
  }
}
</script>
<style lang="less" scoped>
.footer {
  margin-top: 60px;
  width: 100%;
  height: 52px;
  z-index: 9;

  .van-tabbar {


    height: 52px;
  }

  .van-tabbar-item {
    text-align: center;

    &__text {
      img {
        width: 18px;
        height: 18px;
      }

      p {
        color: #878999;
      }
    }

    &--active {
      color: #878999;
    }
  }
}
</style>
